import React from 'react'
import ContentClear from 'material-ui/svg-icons/content/clear';
import Paper from 'material-ui/Paper';
import IconButton from 'material-ui/IconButton';

import Options from './Options';
import OptionAdder from './OptionAdder';
import {myStyles as defaultStyles} from '../utils';

const myStyles = {
    row: {display: 'flex', alignItems: 'center'},
    twiceRem: {height: '2rem'},
}

export default class QuestionCards extends React.Component {
    constructor(props) {
        super(props)
        this.getAddOption = this.getAddOption.bind(this)
    }

    getAddOption(questionIndex){
        const me = this
        return optionText => {
            me.props.addOption(questionIndex,optionText)
        }
    }

    getRemoveOption(questionIndex){
        const me = this
        return optionIndex => {
            me.props.removeOption(questionIndex,optionIndex)
        }
    }

    render() {
        const questionCards = this.props.questions.map((question, index) => {
            return (
                <Paper key={index} style={defaultStyles.paper} zDepth={4} >
                    <div style={myStyles.row}>
                        <h3>{index + 1}.{question.title}</h3>
                        <IconButton
                            onClick={() => {this.props.removeQuestion(index)}}
                            children={<ContentClear/>} />
                    </div>

                    <Options
                        options={question.options}
                        removeOption={this.getRemoveOption(index)}
                    />

                    <OptionAdder addOption={this.getAddOption(index)} />
                </Paper>
            )
        })

        return (
            <div>{questionCards}</div>
        )
    }
}
